<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>教材版本对比 - 带Mock数据</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#2563eb',
                        success: '#10b981',
                        warning: '#f59e0b',
                        danger: '#ef4444',
                       新增: '#ef4444',
                       删除: '#10b981',
                       修改: '#f59e0b',
                    }
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .transition-smooth {
                transition: all 0.3s ease;
            }
            .tree-line {
                position: relative;
            }
            .tree-line::before {
                content: '';
                position: absolute;
                left: -16px;
                top: 0;
                height: 100%;
                width: 1px;
                background-color: #d1d5db;
            }
            .tree-line::after {
                content: '';
                position: absolute;
                left: -16px;
                top: 10px;
                width: 8px;
                height: 1px;
                background-color: #d1d5db;
            }
        }
    </style>
</head>
<body class="bg-gray-50 font-sans">
    <div class="min-h-screen flex flex-col">
        <!-- 顶部导航 -->
        <header class="bg-white shadow-sm">
            <div class="container mx-auto px-4 py-3 flex items-center justify-between">
                <div class="flex items-center gap-2">
                    <i class="fa fa-graduation-cap text-primary text-2xl"></i>
                    <h1 class="text-xl font-bold">智慧教育题库系统</h1>
                </div>
                <div class="flex items-center gap-4">
                    <button class="text-gray-500 hover:text-primary transition-smooth">
                        <i class="fa fa-bell-o"></i>
                    </button>
                    <div class="flex items-center gap-2">
                        <img src="https://picsum.photos/id/1001/40/40" alt="用户头像" class="w-8 h-8 rounded-full">
                        <span class="text-sm font-medium">李老师</span>
                    </div>
                </div>
            </div>
        </header>

        <!-- 主内容区 -->
        <main class="flex-1 container mx-auto px-4 py-6">
            <!-- 页面导航与标题 -->
            <div class="mb-6">
                <div class="text-sm text-gray-500 mb-2">
                    <a href="#" class="hover:text-primary">教材版本管理</a> <i class="fa fa-angle-right text-xs mx-1"></i> 版本对比
                </div>
                <h2 class="text-2xl font-bold text-gray-800">教材版本对比</h2>
                <p class="text-gray-500 mt-1">对比不同版本教材的章节与知识点差异</p>
            </div>

            <!-- 版本选择区 -->
            <div class="bg-white rounded-lg shadow-md p-4 mb-6">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">源版本</label>
                        <select id="sourceVersion" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-primary/50 focus:border-primary">
                            <option value="1">数学必修一（人教版2023）</option>
                            <option value="2">数学必修一（苏教版2022）</option>
                            <option value="3">数学必修一（北师大版2023）</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">目标版本</label>
                        <select id="targetVersion" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-primary/50 focus:border-primary">
                            <option value="2">数学必修一（苏教版2022）</option>
                            <option value="1">数学必修一（人教版2023）</option>
                            <option value="3">数学必修一（北师大版2023）</option>
                        </select>
                    </div>
                </div>
                <div class="mt-4 flex justify-end">
                    <button id="compareBtn" class="px-4 py-2 bg-primary text-white rounded-md hover:bg-primary/90 transition-smooth">
                        <i class="fa fa-refresh mr-1"></i> 重新对比
                    </button>
                </div>
            </div>

            <!-- 对比结果概览 -->
            <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
                <div class="bg-white rounded-lg shadow-md p-4 border-l-4 border-新增">
                    <div class="flex items-center justify-between">
                        <h3 class="font-medium text-gray-700">新增章节</h3>
                        <span class="text-新增 text-xl font-bold">2</span>
                    </div>
                    <p class="text-sm text-gray-500 mt-1">目标版本新增的章节数量</p>
                </div>
                <div class="bg-white rounded-lg shadow-md p-4 border-l-4 border-删除">
                    <div class="flex items-center justify-between">
                        <h3 class="font-medium text-gray-700">删除章节</h3>
                        <span class="text-删除 text-xl font-bold">1</span>
                    </div>
                    <p class="text-sm text-gray-500 mt-1">目标版本删除的章节数量</p>
                </div>
                <div class="bg-white rounded-lg shadow-md p-4 border-l-4 border-修改">
                    <div class="flex items-center justify-between">
                        <h3 class="font-medium text-gray-700">修改章节</h3>
                        <span class="text-修改 text-xl font-bold">3</span>
                    </div>
                    <p class="text-sm text-gray-500 mt-1">内容有调整的章节数量</p>
                </div>
            </div>

            <!-- 知识点差异统计 -->
            <div class="bg-white rounded-lg shadow-md p-4 mb-6">
                <h3 class="text-lg font-semibold mb-4">知识点差异统计</h3>
                <div class="h-64">
                    <canvas id="knowledgeChart"></canvas>
                </div>
            </div>

            <!-- 章节对比详情 -->
            <div class="bg-white rounded-lg shadow-md overflow-hidden mb-6">
                <div class="grid grid-cols-1 md:grid-cols-2 divide-y md:divide-y-0 md:divide-x divide-gray-200">
                    <!-- 源版本章节树 -->
                    <div class="p-4">
                        <h3 class="text-lg font-semibold mb-4 flex items-center">
                            <i class="fa fa-book text-primary mr-2"></i>
                            数学必修一（人教版2023）
                        </h3>
                        <ul class="pl-4 space-y-1" id="sourceChapterTree">
                            <!-- 源版本章节数据将通过JS渲染 -->
                        </ul>
                    </div>

                    <!-- 目标版本章节树 -->
                    <div class="p-4">
                        <h3 class="text-lg font-semibold mb-4 flex items-center">
                            <i class="fa fa-book text-primary mr-2"></i>
                            数学必修一（苏教版2022）
                        </h3>
                        <ul class="pl-4 space-y-1" id="targetChapterTree">
                            <!-- 目标版本章节数据将通过JS渲染 -->
                        </ul>
                    </div>
                </div>

                <!-- 操作区 -->
                <div class="px-6 py-4 bg-gray-50 flex justify-end gap-3 border-t border-gray-200">
                    <button class="px-4 py-2 border border-gray-300 rounded-md hover:bg-gray-50 transition-smooth">
                        导出差异报告
                    </button>
                    <button class="px-4 py-2 bg-primary text-white rounded-md hover:bg-primary/90 transition-smooth">
                        一键迁移试题
                    </button>
                </div>
            </div>

            <!-- 章节详情对比弹窗 (默认隐藏) -->
            <div id="chapterDetailModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
                <div class="bg-white rounded-lg w-full max-w-4xl mx-4 max-h-[80vh] overflow-hidden flex flex-col">
                    <div class="px-6 py-4 border-b border-gray-200 flex justify-between items-center">
                        <h3 class="text-lg font-semibold" id="detailModalTitle">章节详情对比</h3>
                        <button id="closeDetailModal" class="text-gray-400 hover:text-gray-600">
                            <i class="fa fa-times"></i>
                        </button>
                    </div>
                    <div class="flex-1 overflow-y-auto p-6" id="chapterDetailContent">
                        <!-- 章节详情对比内容将通过JS渲染 -->
                    </div>
                    <div class="px-6 py-4 bg-gray-50 rounded-b-lg flex justify-end">
                        <button id="closeDetailBtn" class="px-4 py-2 bg-primary text-white rounded-md hover:bg-primary/90 transition-smooth">
                            关闭
                        </button>
                    </div>
                </div>
            </div>
        </main>

        <!-- 页脚 -->
        <footer class="bg-white border-t border-gray-200 py-4 mt-6">
            <div class="container mx-auto px-4 text-center text-sm text-gray-500">
                © 2025 智慧教育题库系统 - 版权所有
            </div>
        </footer>
    </div>

    <script>
        // 版本对比Mock数据 - 人教版2023 vs 苏教版2022
        const versionCompareData = {
            source: {
                id: 1,
                name: "数学必修一（人教版2023）",
                chapters: [
                    { 
                        id: 101, 
                        name: "第一章 集合与常用逻辑用语", 
                        status: "修改",
                        sections: [
                            { id: 1011, name: "1.1 集合的概念", status: "相同", knowledge: 3 },
                            { id: 1012, name: "1.2 集合间的基本关系", status: "相同", knowledge: 2 },
                            { id: 1013, name: "1.3 集合的基本运算", status: "相同", knowledge: 2 },
                            { id: 1014, name: "1.4 充分条件与必要条件", status: "修改", knowledge: 3 },
                            { id: 1015, name: "1.5 全称量词与存在量词", status: "相同", knowledge: 2 }
                        ],
                        totalKnowledge: 12
                    },
                    { 
                        id: 102, 
                        name: "第二章 一元二次函数、方程和不等式", 
                        status: "相同",
                        sections: [
                            { id: 1021, name: "2.1 等式性质与不等式性质", status: "相同", knowledge: 4 },
                            { id: 1022, name: "2.2 基本不等式", status: "相同", knowledge: 2 },
                            { id: 1023, name: "2.3 二次函数与一元二次方程、不等式", status: "相同", knowledge: 3 }
                        ],
                        totalKnowledge: 9
                    },
                    { 
                        id: 103, 
                        name: "第三章 函数的概念与性质", 
                        status: "修改",
                        sections: [
                            { id: 1031, name: "3.1 函数的概念及其表示", status: "相同", knowledge: 4 },
                            { id: 1032, name: "3.2 函数的基本性质", status: "修改", knowledge: 5 },
                            { id: 1033, name: "3.3 幂函数", status: "相同", knowledge: 2 },
                            { id: 1034, name: "3.4 函数的应用（一）", status: "删除", knowledge: 2 }
                        ],
                        totalKnowledge: 13
                    },
                    { 
                        id: 104, 
                        name: "第四章 指数函数与对数函数", 
                        status: "相同",
                        sections: [
                            { id: 1041, name: "4.1 指数", status: "相同", knowledge: 3 },
                            { id: 1042, name: "4.2 指数函数", status: "相同", knowledge: 3 },
                            { id: 1043, name: "4.3 对数", status: "相同", knowledge: 3 },
                            { id: 1044, name: "4.4 对数函数", status: "相同", knowledge: 3 },
                            { id: 1045, name: "4.5 函数的应用（二）", status: "相同", knowledge: 2 }
                        ],
                        totalKnowledge: 14
                    },
                    { 
                        id: 105, 
                        name: "第五章 三角函数", 
                        status: "删除",
                        sections: [
                            { id: 1051, name: "5.1 任意角和弧度制", status: "删除", knowledge: 2 },
                            { id: 1052, name: "5.2 三角函数的概念", status: "删除", knowledge: 3 },
                            { id: 1053, name: "5.3 诱导公式", status: "删除", knowledge: 4 },
                            { id: 1054, name: "5.4 三角函数的图象与性质", status: "删除", knowledge: 5 }
                        ],
                        totalKnowledge: 14
                    }
                ],
                totalChapter: 5,
                totalSection: 19,
                totalKnowledge: 58
            },
            target: {
                id: 2,
                name: "数学必修一（苏教版2022）",
                chapters: [
                    { 
                        id: 201, 
                        name: "第一章 集合", 
                        status: "修改",
                        sections: [
                            { id: 2011, name: "1.1 集合的概念与表示", status: "相同", knowledge: 3 },
                            { id: 2012, name: "1.2 集合的基本关系", status: "相同", knowledge: 2 },
                            { id: 2013, name: "1.3 集合的基本运算", status: "相同", knowledge: 2 }
                        ],
                        totalKnowledge: 7
                    },
                    { 
                        id: 202, 
                        name: "第二章 常用逻辑用语", 
                        status: "新增",
                        sections: [
                            { id: 2021, name: "2.1 命题、定理、定义", status: "新增", knowledge: 2 },
                            { id: 2022, name: "2.2 充分条件、必要条件、充要条件", status: "修改", knowledge: 3 },
                            { id: 2023, name: "2.3 全称量词与存在量词", status: "相同", knowledge: 2 }
                        ],
                        totalKnowledge: 7
                    },
                    { 
                        id: 203, 
                        name: "第三章 不等式", 
                        status: "修改",
                        sections: [
                            { id: 2031, name: "3.1 不等式的基本性质", status: "相同", knowledge: 4 },
                            { id: 2032, name: "3.2 基本不等式", status: "相同", knowledge: 2 },
                            { id: 2033, name: "3.3 从函数观点看一元二次方程和不等式", status: "修改", knowledge: 4 }
                        ],
                        totalKnowledge: 10
                    },
                    { 
                        id: 204, 
                        name: "第四章 函数的概念与性质", 
                        status: "修改",
                        sections: [
                            { id: 2041, name: "4.1 函数的概念", status: "相同", knowledge: 3 },
                            { id: 2042, name: "4.2 函数的表示法", status: "相同", knowledge: 2 },
                            { id: 2043, name: "4.3 函数的单调性", status: "修改", knowledge: 3 },
                            { id: 2044, name: "4.4 函数的奇偶性与周期性", status: "新增", knowledge: 3 },
                            { id: 2045, name: "4.5 幂函数", status: "相同", knowledge: 2 },
                            { id: 2046, name: "4.6 函数的应用（一）", status: "相同", knowledge: 2 }
                        ],
                        totalKnowledge: 15
                    },
                    { 
                        id: 205, 
                        name: "第五章 指数函数与对数函数", 
                        status: "相同",
                        sections: [
                            { id: 2051, name: "5.1 指数与指数函数", status: "相同", knowledge: 4 },
                            { id: 2052, name: "5.2 对数与对数函数", status: "相同", knowledge: 4 },
                            { id: 2053, name: "5.3 函数的应用（二）", status: "相同", knowledge: 2 }
                        ],
                        totalKnowledge: 10
                    },
                    { 
                        id: 206, 
                        name: "第六章 数学建模初步", 
                        status: "新增",
                        sections: [
                            { id: 2061, name: "6.1 数学建模的主要步骤", status: "新增", knowledge: 2 },
                            { id: 2062, name: "6.2 数学建模案例", status: "新增", knowledge: 3 }
                        ],
                        totalKnowledge: 5
                    }
                ],
                totalChapter: 6,
                totalSection: 20,
                totalKnowledge: 49
            },
            // 知识点差异统计
            knowledgeDiff: {
                相同: 32,
                新增: 10,
                删除: 17,
                修改: 14
            }
        };

        // 状态样式映射
        const statusConfig = {
            相同: { class: 'text-gray-700', icon: '', label: '' },
            新增: { class: 'text-新增 font-medium', icon: '<i class="fa fa-plus-circle mr-1"></i>', label: '<span class="ml-1 px-1.5 py-0.5 bg-新增/10 text-新增 text-xs rounded">新增</span>' },
            删除: { class: 'text-删除 font-medium line-through', icon: '<i class="fa fa-minus-circle mr-1"></i>', label: '<span class="ml-1 px-1.5 py-0.5 bg-删除/10 text-删除 text-xs rounded">删除</span>' },
            修改: { class: 'text-修改 font-medium', icon: '<i class="fa fa-pencil mr-1"></i>', label: '<span class="ml-1 px-1.5 py-0.5 bg-修改/10 text-修改 text-xs rounded">修改</span>' }
        };

        // 渲染章节树
        function renderChapterTree(containerId, chapters) {
            const container = document.getElementById(containerId);
            container.innerHTML = '';
            
            chapters.forEach(chapter => {
                const chapterLi = document.createElement('li');
                chapterLi.className = 'mb-2';
                
                // 章节标题
                const chapterTitle = document.createElement('div');
                chapterTitle.className = `font-medium ${statusConfig[chapter.status].class} flex items-center cursor-pointer chapter-item`;
                chapterTitle.setAttribute('data-id', chapter.id);
                chapterTitle.setAttribute('data-status', chapter.status);
                chapterTitle.innerHTML = `
                    ${statusConfig[chapter.status].icon}
                    ${chapter.name}
                    ${statusConfig[chapter.status].label}
                    <span class="ml-2 text-xs text-gray-500">(${chapter.totalKnowledge}个知识点)</span>
                    <i class="fa fa-chevron-down ml-2 text-xs text-gray-400"></i>
                `;
                chapterLi.appendChild(chapterTitle);
                
                // 小节列表
                const sectionUl = document.createElement('ul');
                sectionUl.className = 'pl-6 mt-1 space-y-1';
                chapter.sections.forEach(section => {
                    const sectionLi = document.createElement('li');
                    sectionLi.className = 'tree-line';
                    
                    const sectionTitle = document.createElement('div');
                    sectionTitle.className = `${statusConfig[section.status].class} text-sm flex items-center`;
                    sectionTitle.innerHTML = `
                        ${statusConfig[section.status].icon}
                        ${section.name}
                        ${statusConfig[section.status].label}
                        <span class="ml-2 text-xs text-gray-500">(${section.knowledge}个)</span>
                    `;
                    sectionLi.appendChild(sectionTitle);
                    sectionUl.appendChild(sectionLi);
                });
                
                chapterLi.appendChild(sectionUl);
                container.appendChild(chapterLi);
            });

            // 添加章节点击事件
            document.querySelectorAll('.chapter-item').forEach(item => {
                item.addEventListener('click', function() {
                    const chapterId = this.getAttribute('data-id');
                    const status = this.getAttribute('data-status');
                    showChapterDetail(chapterId, status);
                });
            });
        }

        // 显示章节详情对比
        function showChapterDetail(chapterId, status) {
            // 找到对应的章节数据
            const sourceChapter = versionCompareData.source.chapters.find(c => c.id == chapterId);
            const targetChapter = versionCompareData.target.chapters.find(c => {
                // 简单匹配逻辑：通过章节名称关键字匹配
                return sourceChapter && c.name.includes(sourceChapter.name.replace(/第[一二三四五六七八九]章/, ''));
            }) || { name: '无对应章节', sections: [], status: status };

            // 更新弹窗标题
            document.getElementById('detailModalTitle').textContent = `章节详情对比：${sourceChapter?.name || '未知章节'}`;
            
            // 渲染详情内容
            const detailContent = document.getElementById('chapterDetailContent');
            detailContent.innerHTML = `
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <h4 class="font-medium text-gray-800 mb-3">人教版2023版内容</h4>
                        ${sourceChapter ? `
                            <div class="bg-gray-50 p-4 rounded-md">
                                <p class="font-medium mb-2">章节概述：</p>
                                <p class="text-sm text-gray-600 mb-4">本章主要介绍了${sourceChapter.name}的基本概念、性质和应用，共包含${sourceChapter.totalKnowledge}个知识点。</p>
                                
                                <p class="font-medium mb-2">知识点列表：</p>
                                <ul class="text-sm text-gray-600 space-y-1 pl-5 list-disc">
                                    <li>集合的定义与表示方法</li>
                                    <li>集合间的包含与相等关系</li>
                                    <li>交集、并集、补集的运算规则</li>
                                    <li>充分条件与必要条件的判断</li>
                                    <li>全称量词与存在量词的应用</li>
                                </ul>
                                
                                <p class="font-medium mt-3 mb-2">教学要求：</p>
                                <p class="text-sm text-gray-600">理解${sourceChapter.name}的基本概念，掌握相关运算方法，能够运用所学知识解决实际问题。</p>
                            </div>
                        ` : '<p class="text-gray-500">该章节在源版本中不存在</p>'}
                    </div>
                    
                    <div>
                        <h4 class="font-medium text-gray-800 mb-3">苏教版2022版内容</h4>
                        ${targetChapter.name !== '无对应章节' ? `
                            <div class="bg-gray-50 p-4 rounded-md">
                                <p class="font-medium mb-2">章节概述：</p>
                                <p class="text-sm text-gray-600 mb-4">本章主要介绍了${targetChapter.name}的基本概念、性质和应用，共包含${targetChapter.totalKnowledge}个知识点。</p>
                                
                                <p class="font-medium mb-2">知识点列表：</p>
                                <ul class="text-sm text-gray-600 space-y-1 pl-5 list-disc">
                                    <li>集合的概念与表示方法（新增Venn图应用）</li>
                                    <li>集合间的基本关系</li>
                                    <li>集合的交、并、补运算</li>
                                    <li>命题与定理的概念（新增）</li>
                                    <li>充分条件、必要条件的判断方法</li>
                                </ul>
                                
                                <p class="font-medium mt-3 mb-2">教学要求：</p>
                                <p class="text-sm text-gray-600">理解${targetChapter.name}的基本概念，掌握相关运算方法，能够运用所学知识解决实际问题，注重数学语言的规范表达。</p>
                            </div>
                        ` : '<p class="text-gray-500">该章节在目标版本中不存在对应内容</p>'}
                    </div>
                </div>
                
                <div class="mt-6">
                    <h4 class="font-medium text-gray-800 mb-3">差异分析</h4>
                    <div class="bg-gray-50 p-4 rounded-md">
                        <p class="text-sm text-gray-600">
                            ${getDiffAnalysis(status, sourceChapter, targetChapter)}
                        </p>
                        <div class="mt-3">
                            <span class="text-sm font-medium text-gray-700">知识点差异：</span>
                            <ul class="text-sm text-gray-600 mt-1 space-y-1 pl-5 list-disc">
                                <li>新增知识点：${status === '新增' ? targetChapter.totalKnowledge : 2}个</li>
                                <li>删除知识点：${status === '删除' ? sourceChapter.totalKnowledge : 3}个</li>
                                <li>修改知识点：${status === '修改' ? 4 : 0}个</li>
                            </ul>
                        </div>
                    </div>
                </div>
            `;

            // 显示弹窗
            document.getElementById('chapterDetailModal').classList.remove('hidden');
        }

        // 生成差异分析文本
        function getDiffAnalysis(status, source, target) {
            switch(status) {
                case '新增':
                    return `目标版本新增了"${target.name}"章节，该章节聚焦于${target.name}的基本知识和应用，包含${target.totalKnowledge}个知识点，是源版本中没有的内容。`;
                case '删除':
                    return `源版本中的"${source.name}"章节在目标版本中被删除，该章节包含${source.totalKnowledge}个知识点，主要内容在目标版本中被整合到其他章节。`;
                case '修改':
                    return `"${source.name}"在两个版本中的章节结构和知识点分布存在差异。目标版本将相关内容拆分为"${target.name}"等章节，知识点数量从${source.totalKnowledge}个调整为${target.totalKnowledge}个，新增了部分应用案例，删除了一些复杂理论。`;
                default:
                    return `两个版本中该章节的核心内容基本一致，知识点数量和分布大致相同，仅有少量表述上的差异。`;
            }
        }

        // 初始化知识点差异图表
        function initKnowledgeChart() {
            const ctx = document.getElementById('knowledgeChart').getContext('2d');
            new Chart(ctx, {
                type: 'doughnut',
                data: {
                    labels: ['相同知识点', '新增知识点', '删除知识点', '修改知识点'],
                    datasets: [{
                        data: [
                            versionCompareData.knowledgeDiff.相同,
                            versionCompareData.knowledgeDiff.新增,
                            versionCompareData.knowledgeDiff.删除,
                            versionCompareData.knowledgeDiff.修改
                        ],
                        backgroundColor: [
                            '#94a3b8', // 相同 - 灰色
                            '#ef4444', // 新增 - 红色
                            '#10b981', // 删除 - 绿色
                            '#f59e0b'  // 修改 - 黄色
                        ],
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                    plugins: {
                        legend: {
                            position: 'right',
                        },
                        title: {
                            display: true,
                            text: '知识点差异分布'
                        }
                    }
                }
            });
        }

        // 初始化页面
        document.addEventListener('DOMContentLoaded', () => {
            // 渲染章节树
            renderChapterTree('sourceChapterTree', versionCompareData.source.chapters);
            renderChapterTree('targetChapterTree', versionCompareData.target.chapters);
            
            // 初始化图表
            initKnowledgeChart();
            
            // 重新对比按钮事件
            document.getElementById('compareBtn').addEventListener('click', () => {
                alert('正在重新对比版本差异...');
                // 实际应用中这里会根据选择的版本重新加载数据
            });

            // 关闭章节详情弹窗
            document.getElementById('closeDetailModal').addEventListener('click', () => {
                document.getElementById('chapterDetailModal').classList.add('hidden');
            });
            document.getElementById('closeDetailBtn').addEventListener('click', () => {
                document.getElementById('chapterDetailModal').classList.add('hidden');
            });

            // 迁移试题按钮事件
            document.querySelector('button:contains("一键迁移试题")').addEventListener('click', () => {
                if(confirm('确定要将源版本的试题迁移至目标版本对应章节吗？')) {
                    alert('试题迁移成功，共迁移126道试题');
                }
            });
        });
    </script>
</body>
</html>
